<template>
	<div>
	<el-form ref="startEndPanel" :model="form" label-width="110px" label="right">
	 <el-form-item label="节点ID:">
	   <el-input v-model="form.id"></el-input>
	 </el-form-item>
	 <el-form-item label="节点名称:">
	   <el-input v-model="form.name"></el-input>
	 </el-form-item>
	 <el-form-item label="节点描述:">
	   <el-input v-model="form.documentation"></el-input>
	 </el-form-item>
	 <el-form-item label="监听器:">
		<el-badge :value="executionListenerLength">
			<el-button size="small" @click="dialogName = 'executionListenerDialog'">编辑</el-button>
		</el-badge>
	 </el-form-item>
	 <el-form-item label="多实例:">
	  <el-badge :is-dot="hasMultiInstance">
	    <el-button size="small" @click="dialogName = 'multiInstanceDialog'">编辑</el-button>
	  </el-badge>
	 </el-form-item>
	</el-form>
	<executionListenerDialog
	v-if="dialogName === 'executionListenerDialog'"	
	:bpmnModel="bpmnModel"
	:element="element"
	@close="finishExecutionListener"
	></executionListenerDialog>
	
	<multiInstanceDialog
	  v-if="dialogName === 'multiInstanceDialog'"
	  :bpmnModel="bpmnModel"
	  :element="element"
	  @close="finishMultiInstance"
	/>
	</div>
</template>

<script>
	import {commonParse} from '../common/parseElement.js'
	import mixinPanel from '../mixins/mixinPanel.js'
	import mixinExecutionListener from '../mixins/mixinExecutionListener.js'
	import multiInstanceDialog from './property/multiInstance.vue'
	export default{
		mixins:[mixinPanel,mixinExecutionListener],
		components:{multiInstanceDialog},
		data(){
			return{
				hasMultiInstance: false,
				form:{}
			}
		},
		created() {
			this.form = commonParse(this.element)
			this.computedHasMultiInstance()
		},
		watch:{
			'form.initiator':function(val){
				if(val==='') val = null
				this.updateProperties({'flowable:initiator':val})
			},
			'form.formKey':function(val){
				if(val==='') val = null
				this.updateProperties({'flowable:formKey':val})
			}
		},
		methods:{
			finishMultiInstance() {
			  if (this.dialogName === 'multiInstanceDialog') {
			    this.computedHasMultiInstance()
			  }
			  this.dialogName = ''
			},
			computedHasMultiInstance() {
			  if (this.element.businessObject.loopCharacteristics) {
			    this.hasMultiInstance = true
			  } else {
			    this.hasMultiInstance = false
			  }
			}
			
		}
		
	}
</script>

<style  >
	label {
		font-weight: initial !important;
	}
</style>
